<template>
  <chart ref="chart" auto-resize :options="options"></chart>
</template>

<script>
export default {
  mounted() {
    // this.handler = setInterval(() => {
    //   this.options.series[0].data[0].value =
    //     (Math.random() * 100).toFixed(2) - 0;
    // }, 2000);
  },
  beforeDestroy() {
    // clearInterval(this.handler);
  },
  data() {
    return {
      handler: "",
      options: {
        // 设置网格样式
        baseOption: {
          timeline: {
            //loop: false,
            axisType: "category",
            show: false,
            autoPlay: true,
            playInterval: 3000,
            data: ["1", "2", "3"],
          },
          legend: {
            textStyle: {
              color: "#01c5db", // 图例文字颜色
            },
            top: "10%",
            data: ["处理中", "待处理", "已关闭"],
          },
          grid: {
            x: 35,
            y: 45,
            x2: 15,
            y2: 20,
          },
          xAxis: [
            {
              type: "category",
              name: "企业",
            },
          ],
          yAxis: { type: "value" },
          color: ["#01c5db", "#b7eb20", "#1964a7"],
          series: [
            {
              type: "line",
            },
          ],
          tooltip: {},
        },
        //变量则写在options中
        options: [
          {
            xAxis: [
              {
                data: ["1.01", "1.02", "1.03", "1.04", "1.05", "1.06", "1.07"],
                axisLabel: {
                  color: " #48eaff",
                },
              },
            ],
            yAxis: [
              {
                axisLabel: {
                  color: " #48eaff",
                },
                splitLine: {
                  show: false,
                },
              },
            ],
            // title: {
            //   text: "电量使用总计",
            //   subtext: "单位:Mwh",
            // },
            series: [
              {
                name: "处理中",
                data: [14, 20, 101, 164, 90, 230, 210],
                type: "line",
                smooth: true,
              },
              {
                name: "待处理",
                data: [40, 94, 191, 324, 290, 330, 310],
                type: "line",
                smooth: true,
              },
              {
                name: "已关闭",
                data: [30, 54, 141, 224, 190, 430, 210],
                type: "line",
                smooth: true,
              },
            ],
          },
          {
            xAxis: [
              {
                data: ["1.08", "1.09", "1.10", "1.11", "1.12", "1.13", "1.14"],
              },
            ],
            // title: {
            //   text: "工单处理统计",
            //   subtext: "单位:Mwh",
            // },
            series: [
              {
                name: "处理中",
                data: [24, 30, 71, 134, 100, 230, 210],
                type: "line",
                smooth: true,
              },
              {
                name: "待处理",
                data: [20, 64, 191, 324, 290, 330, 310],
                type: "line",
                smooth: true,
              },
              {
                name: "已关闭",
                data: [90, 74, 141, 224, 190, 430, 210],
                type: "line",
                smooth: true,
              },
            ],
          },
          {
            xAxis: [
              {
                data: ["1.15", "1.16", "1.17", "1.18", "1.19", "1.10", "1.11"],
              },
            ],
            // title: {
            //   text: "工单处理统计",
            //   subtext: "单位:Mwh",
            // },
            series: [
              {
                name: "处理中",
                data: [34, 40, 21, 54, 290, 230, 210],
                type: "line",
                smooth: true,
              },
              {
                name: "待处理",
                data: [30, 44, 191, 324, 290, 330, 310],
                type: "line",
                smooth: true,
              },
              {
                name: "已关闭",
                data: [100, 56, 141, 224, 190, 430, 210],
                type: "line",
                smooth: true,
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
